<template>
	<view class="">

		<view class="p12 pb20" style="background: #F8F8F8;">
			<view class="u-flex u-f-jsb">
				<view class="fz18 c3 ">{{info.propertyName}}</view>

			</view>
			<view class="fz12 c9 mt6">地址：{{info.detailedAddress}}</view>

			<view class="u-flex u-f-jsb u-f-justify mt25">
				<view class="fz12 c6 u-f1">
					<view class="fz16 c3">￥{{info.contractTotalPrice}}</view>
					<view class="mt6">承包总价</view>
				</view>
				<view class="fz12 c6 u-f1">
					<view class="fz16 c3">￥{{info.stockPrice}}</view>
					<view class="mt6">股价</view>
				</view>
			</view>
			<view class="u-flex u-f-jsb u-f-justify mt25">

				<view class="fz12 c6 u-f1">
					<view class="fz16 c3">{{info.area}}㎡</view>
					<view class="mt6">面积</view>
				</view>
				<view class="fz12 c6 u-f1">
					<view class="fz16 c3">{{info.virtualInvestorsCount+info.actualInvestorsCount}}</view>
					<view class="mt6">投资者</view>
				</view>
			</view>
		</view>
		<view class="p12 mt15">
			<view class="bg-white p u-flex u-f-jsb u-f-justify">
				<view class="fz12 c6">
					<view class="fz16 c3">{{info.totalShares}}</view>
					<view class="mt6">份额</view>
				</view>
				<view class="fz12 c6">
					<view class="fz16 c3">{{info.virtualInvestorsCount+info.actualInvestorsCount}}</view>
					<view class="mt6">房东</view>
				</view>

				<view class="fz12 c6" style="min-width: 200rpx;">
					<view class="fz16 c3">
						<u-line-progress :show-percent="false" height="16" active-color="#F24646"
							:percent="(info.totalShares-info.remainingShares)/info.totalShares*100"></u-line-progress>
					</view>
					<view class="mt6 u-flex u-f-jsb">待认领房东<span>{{info.remainingShares}}/{{info.totalShares}}</span>
					</view>
				</view>
			</view>
			<view class="mt30">
				<view class="fz16 c3 mb15">购买数量</view>
				<u-number-box :input-width="300" :input-height="90" :min="1" :size="40" :max="info.remainingShares" v-model="skuNum"></u-number-box>
			</view>
			<view class="fz14 mt15">所需资金<span class="price ml4 fz16 u-font-bold">￥{{info.stockPrice*skuNum}}</span>
			</view>
		</view>
		<view class="h80"></view>
		<view class="fixed-bottom">
			<view class="btn" style="background: #F24646;" @click="showTips=true">下一步</view>
		</view>

		<u-popup v-model="showTips" :mask-close-able="false" mode="center" border-radius="10" :closeable="false">
			<view style="padding: 40rpx 30rpx;width:600rpx">
				<template v-if="!signFlowId">

					<view class="">
						<view class="fz14 c3">姓名</view>
						<view class="p12 mt8" style="background: #F8F8F8;">
							<input style="padding: 0;" v-model="name" type="text" placeholder="请填写您的姓名" />
						</view>
					</view>
					<view class="mt20">
						<view class="fz14 c3">手机号</view>
						<view class="p12 mt8" style="background: #F8F8F8;">
							<input style="padding: 0;" v-model="mobile" type="text" placeholder="请填写手机号" />
						</view>
					</view>
				</template>
				<template v-if="signFlowId">
					<view class="u-flex u-f-justify"> <u-icon class="fz30" name="info-circle-fill"
							color="#E88B8B"></u-icon>
					</view>
					<view>
						<view class="fz16 mt20 mb20" style="text-align: center;line-height: 56rpx;">
							签约短信已发送<br /> 请确认是否完成签约！</view>

					</view>
				</template>
				<view class="fixed-bottom" style="position: static;">
					<view class="btn" style="background: #F24646;" @click="submit" v-if="signFlowId">已完成签约</view>
					<view v-if="signFlowId" class="u-flex u-f-justify mt15" style="color: #F24646;"
						@click="signFlowId='',showTips=false">退出签约</view>
					<view class="btn" style="background: #F24646;" @click="toBooking" v-else>去签约</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				skuNum: 1,
				name: '',
				showTips: false,
				mobile: '',
				signFlowId: '',
				isDisabled:false,
				info: {
					pictures: [{}]
				},

			}
		},
		onLoad(e) {
			this.getInfo(e.id)
		},
		onShareAppMessage(e) {},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return this.mpShare
		},
		// #endif
		onShow() {},

		methods: {

			toBooking() {
				if(this.isDisabled){
					return
				}
				this.isDisabled=true
				this.$api.signApply({
					productId: this.info.id,
					mobile: this.mobile,
					amount: this.info.stockPrice * this.skuNum,
					name: this.name
				}, res => {
					if (res.code == 200) {
						this.signFlowId = res.data.signFlowId
						setTimeout(()=>{
							
								this.isDisabled=false
						},1500)
					} else {
						this.isDisabled=false
						this.$common.errorToShow(res.message)
					}
				})

			},
			submit() {



				this.$api.file_finish({
					signFlowId: this.signFlowId,
				}, res => {
					if (res.code == 200 && res.data) {
						this.$api.buyProduct({
							propertyId: this.info.id,
							electronicFileId: this.signFlowId,
							quantity: this.skuNum
						}, res => {
							if (res.code == 200) {
								this.$common.successToShow('下单成功，请耐心等待审核', ress => {
									uni.redirectTo({
										url: '/pages/product/status'
									})
								})
							} else {
								this.$common.errorToShow(res.message)
							}
						})
					} else {
						this.$common.errorToShow('请先完成签约！')
					}
				})

			},
			getInfo(id) {
				this.$api.getHousingDetail({
					id
				}, res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}
</style>